<template>
  <div
    class="showPanel flex flex-col gap-y-[20px] h-full animate__animated transitionPanel relative animate__fadeInLeft"
  >
    <div class="relative h-full text-[#fff]">
      <div
        class="absolute flex flex-col gap-y-[20px] top-0 left-0 right-0 bottom-0 pt-[50px] pl-[10px] pb-[50px]"
      >
        <base-card class="flex-1 overflow-hidden" title="党建数据可视化">
          <div
            style="background: rgba(23, 44, 80, 0.4)"
            class="rounded-[4px] grid grid-cols-2 pl-[5px] items-center flex-1"
          >
            <div v-for="(item, index) in topList2" class="flex items-center">
              <img :src="item.img" class="w-[38px] h-[38px]" />
              <div class="ml-[5px]">
                <div>{{ item.label }}</div>
                <div class="flex items-center light_blue_text">
                  {{ item.value }}
                </div>
              </div>
            </div>
          </div>
        </base-card>
        <base-card class="flex-1 overflow-hidden" title="支部活动参与">
          <base-chart :options="midOption"></base-chart>
        </base-card>
        <base-card class="flex-1 overflow-hidden" title="党建人员发展趋势">
          <base-chart :options="bottomOption"></base-chart>
        </base-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import BaseCard from "@/components/three/component/baseCard.vue";
import BaseChart from "@/components/three/component/baseChart/index.jsx";
import { onMounted, ref } from "vue";
import {
  getChemicalDailyRecords,
  getSelectBranchConstruction,
  getSelectBranchDegree,
  getSelectBranchGrowth,
  getSelectBranchInfo,
  getSelectBranchToll,
  getZHFWdata,
} from "@/api/dataScreen/dataScreen.js";
import { dayjs } from "element-plus";
import { find, map } from "lodash-es";
import * as echarts from "echarts";
import SimpleLine from "@/components/three/component/simpleLine.vue";
import icon1 from "@/assets/images/bigscreen/icon1.png";
import icon2 from "@/assets/images/bigscreen/icon2.png";
import icon3 from "@/assets/images/bigscreen/icon3.png";
import icon4 from "@/assets/images/bigscreen/icon4.png";
import { CommonEchartLegend } from "@/utils/index.js";
import { ZHWFDATA } from "@/components/three/component/resultData.js";
let dataMap = {
  管委会党支部: {
    value: 10,
    percent: "33%",
  },
  龙源党支部: {
    value: 10,
    percent: "33%",
  },
  恒胜党支部: {
    value: 10,
    percent: "34%",
  },
};
let ser_data = [
  {
    value: 10,
    name: "管委会党支部",
    itemStyle: {
      color: "#90D5CC",
    },
  },
  {
    value: 10,
    name: "龙源党支部",
    itemStyle: {
      color: "#A3E9F4",
    },
  },
  {
    value: 10,
    name: "恒胜党支部",
    itemStyle: {
      color: "#6D77F4",
    },
  },
];
const midOption = ref({
  backgroundColor: "rgba(0,0,0,0)",
  // color: ["#90D5CC", "#A3E9F4", "#6D77F4"],
  title: [
    // {
    //   text: "管委会党支部",
    //   top: "43%",
    //   left: "22%",
    //   padding: [0, 0, 0, -20],
    //   textStyle: {
    //     color: "#3FAA90",
    //     fontSize: 14,
    //     fontWeight: "bold",
    //   },
    // },
  ],
  tooltip: {
    show: false,
    trigger: "item",
  },
  legend: {
    ...CommonEchartLegend,
    orient: "vertical",
    right: "5%",
    top: "middle",
    formatter: (name) => {
      return `${name}  ${find(partyBranchActivitiesData.value, { name: name })?.activeCount ?? 0}`;
    },
  },
  series: [
    {
      type: "pie",
      radius: ["45%", "65%"],
      center: ["28%", "50%"],
      label: {
        show: false,
      },
      data: [],
    },
  ],
});
const topList2 = ref([
  {
    label: "党员数量",
    value: "0",
    img: icon1,
  },
  {
    label: "党组织数量",
    value: "0",
    img: icon2,
  },
  {
    label: "先进党员数量",
    value: "0",
    img: icon3,
  },
  {
    label: "民主评测结果",
    value: "0",
    img: icon4,
  },
]);
const bottomOption = ref({
  grid: {
    left: "12%",
    top: "15%",
    bottom: "15%",
    right: "8%",
  },
  tooltip: {
    trigger: "axis",
    backgroundColor: "rgba(0,0,0,0.6)",
    borderWidth: "0",
    textStyle: {
      color: "#fff",
    },
  },
  xAxis: {
    data: [],
    axisTick: {
      show: false,
    },
    axisLine: {
      lineStyle: {
        color: "rgba(255, 129, 109, 0.1)",
        width: 1,
      },
    },
    axisLabel: {
      textStyle: {
        color: "#fff",
        fontSize: 12,
      },
    },
  },
  yAxis: [
    {
      type: "value",
      splitNumber: 2,
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255, 129, 109, 0.1)",
          width: 1,
        },
      },
      axisLabel: {
        textStyle: {
          color: "#fff",
        },
      },
      areaStyle: {},
      splitLine: {
        show: true,
        lineStyle: {
          color: "#111",
          width: 1,
          type: "dashed",
        },
      },
    },
  ],
  series: [
    {
      name: "人员趋势",
      type: "line",
      color: "#85DCF8",
      barWidth: 40,
      label: {
        show: false,
        position: "top",
        distance: 15,
        fontWeight: "bolder",
        fontSize: 20,
      },
      areaStyle: {
        color: "rgba(133,220,248,0.5)",
      },
      itemStyle: {
        emphasis: {
          opacity: 1,
        },
      },
      data: [],
    },
  ],
});
const payload = {
  id: "",
  data: {
    title: ["生态指数"],
    unit: ["%"],
    x: ["原煤", "重精", "浮精", "外过", "末中"],
    data1: [20, 80, 100, 40, 34, 90, 60, 20, 80, 100, 40, 34],
  },
};

const x = payload.data.x || [];
//bottom
onMounted(() => {
  getData();
});
const partyBuildingDepartmentData = ref({});
const partyBranchActivitiesData = ref([]);
const partyMemberDevelopmentTrendsData = ref([]);
const getData = () => {
  getZHFWdata().then((res) => {
    // 党建数据可视化
    getSelectBranchConstruction().then((res) => {
      partyBuildingDepartmentData.value = res.data;
      topList2.value[0].value = res.data.partyNum;
      topList2.value[1].value = res.data.organizeNum;
      topList2.value[2].value = res.data.advancePartyNum;
      topList2.value[3].value = res.data.proportion;
      console.log(res);
    });
    //党支部活动参与
    getSelectBranchInfo().then((res) => {
      partyBranchActivitiesData.value = res.data || [];
      midOption.value.series[0].data = map(res.data, (item) => {
        return {
          value: item.activeCount || 0,
          name: item.name || "",
        };
      });
    });
    //党建人员发展趋势
    getSelectBranchGrowth().then((res) => {
      console.log(res);
      partyMemberDevelopmentTrendsData.value = res.data || [];
      bottomOption.value.xAxis.data = map(
        partyMemberDevelopmentTrendsData.value || [],
        (item) => {
          return item.name || "";
        },
      );
      bottomOption.value.series[0].data = map(
        partyMemberDevelopmentTrendsData.value || [],
        (item) => {
          return item.toll || 0;
        },
      );
    });
  });
};
</script>
<style scoped lang="less"></style>
